Payments app design fixes#1375
Merged
Merged
Conversation
Introduce a canonical dialog surface with structured header/body/footer slots and styling controls so feature pages can reuse a consistent modal foundation. Made-with: Cursor
Expose the new dialog component and related helper types from the package root so dashboard pages can import the shared modal API consistently. Made-with: Cursor
Add guidance for when and how to use DesignDialog so modal redesign work follows a single documented pattern across dashboard routes. Made-with: Cursor
Replace the hand-wired trigger history dialog chrome with the shared DesignDialog wrapper while preserving the existing summary header and trigger list behavior. Made-with: Cursor
Show confirmation, rich-header, tester, and parity examples so agents and developers can copy the shared modal patterns directly. Made-with: Cursor
Introduce a dedicated dialog playground entry with shape presets and generated snippets to make modal experimentation and reuse easier. Made-with: Cursor
Ensures popover content receives pointer events consistently in stack-ui and the dashboard shadcn wrapper. Made-with: Cursor
Split hover, focus, and data-[highlighted] so keyboard navigation matches pointer hover for menu and select items. Made-with: Cursor
Payments product flows use the updated repeating list behavior and styling. Made-with: Cursor
Aligns the payments item dialog with the new form and popover patterns. Made-with: Cursor
Applies the updated UI patterns to the product line creation flow. Made-with: Cursor
Refactors included item editing to match the new dialog and input UX. Made-with: Cursor
Aligns price editing with the shared dialog and form components. Made-with: Cursor
Wires the new product flow to the refactored dialogs and pricing UI. Made-with: Cursor
Replace generic Card layout with DesignCard, shared StatusRow, and DesignBadge/DesignButton for consistent status styling across not connected, incomplete setup, and connected states. Made-with: Cursor
Use DesignCard with gradient by state and DesignBadge for the test-mode feature list when active, matching the updated payments settings visuals. Made-with: Cursor
Swap Card for DesignCard, move save/cancel into card actions, refine rows and accordions, and add a Modified badge for pending toggles on controllable and platform-managed sections. Made-with: Cursor
Replace SettingSwitch with a DesignCard, optimistic Switch updates, and tighter section spacing to match the rest of the payments settings page. Made-with: Cursor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR introduces ChangesDesignDialog Component Foundation & Documentation
Remove Legacy Include-by-Default Pricing Sentinel
Dialog Migrations in Payments UI
Dialog Migrations Across Dashboard Pages
Payment Pages Design System Updates
Base UI Primitives & Minor Updates
🎯 4 (Complex) | ⏱️ ~60 minutes Possibly Related PRs
Suggested Reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
|
Contributor
Greptile SummaryThis PR migrates dashboard payment and auth pages to a new design-component system (
Confidence Score: 5/5Safe to merge; the logic changes are well-scoped and the new conversations feature follows established patterns. The payments switch refactor correctly moves the free-plan check earlier without altering downstream authorization. All new conversation routes use createSmartRouteHandler and properly scope reads through viewerProjectUserId. The design migration is additive. The only finding is a redundant direct-source-path re-export that is currently harmless but could diverge in a production build. apps/dashboard/src/components/design-components/index.ts — redundant cross-package source import that duplicates what the package index already exports. Important Files Changed
Sequence DiagramsequenceDiagram
participant U as End User
participant DU as Dashboard UI (dogfood routes)
participant DI as Dashboard Internal (admin routes)
participant CL as conversations.tsx lib
participant DB as PostgreSQL
Note over DU,DB: User-facing conversation flow
U->>DU: POST /dogfood/support/conversations (subject, message)
DU->>CL: createConversation(tenancyId, userId, ...)
CL->>DB: INSERT Conversation + ConversationEntryPoint + ConversationMessage
DU-->>U: "{ conversation_id }"
U->>DU: PATCH /dogfood/support/conversations/:id (message)
DU->>CL: "appendConversationMessage(viewerProjectUserId=userId, ...)"
CL->>DB: "SELECT Conversation WHERE projectUserId=viewerProjectUserId (auth gate)"
CL->>DB: INSERT ConversationMessage + UPDATE Conversation timestamps
DU-->>U: updated conversation detail
Note over DI,DB: Admin / support-agent flow
DI->>CL: listConversationSummaries(tenancyId, status?, userId?)
CL->>DB: SELECT with LEFT JOIN ProjectUser for display name/email
DI-->>DI: agent replies / status changes / metadata updates
DI->>CL: updateConversationStatus / appendConversationMessage (agent sender)
CL->>DB: INSERT message + UPDATE Conversation (SLA timestamps, status)
Prompt To Fix All With AIFix the following 1 code review issue. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 1
apps/dashboard/src/components/design-components/index.ts:1-14
`DesignDialog` and its siblings are now exported from `packages/dashboard-ui-components/src/index.ts` (added in this PR), so `export * from "@stackframe/dashboard-ui-components"` already surfaces them. The explicit re-export via a 5-level relative path to the package source is redundant: if the package ever resolves to its compiled `dist/` output in a production build, this direct source import would produce a second, distinct module instance — breaking React component identity comparisons (`===`) for anything wrapping or memoising these components.
```suggestion
export * from "@stackframe/dashboard-ui-components";
```
Reviews (2): Last reviewed commit: "Enhance PageClient with customizable dia..." | Re-trigger Greptile |
- Removed redundant checks for free plans in the payment switch logic to streamline the process. - Added a new function to determine if a price is free based on all supported currencies. - Updated error handling to ensure subscriptions cannot be switched without an existing subscription or valid free plan. - Minor UI adjustments in the dashboard to improve user experience, including a button fix in the RuleTriggerHistoryDialog. This commit improves the clarity and efficiency of the payment switching functionality while ensuring proper validation of subscription states.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
- Introduced `designFieldTriggerClasses` and `designPopoverSurfaceClasses` for consistent styling across payment-related components. - Updated `IncludedItemDialog`, `PriceEditDialog`, `RepeatingInput`, and `ItemDialog` to utilize the new design tokens, enhancing maintainability and visual consistency. - Removed redundant local definitions of options in favor of centralized constants for repeat and free trial units. This commit streamlines the styling process and improves the overall design coherence in the payment dialogs.
nams1570
approved these changes
May 21, 2026
Collaborator
nams1570
left a comment
nams1570
left a comment
There was a problem hiding this comment.
Assuming the diff doesnt end up readding default prod changes, I think the PR is good to merge. The UI/UX changes are correct and non breaking for payments
- Updated the `validateAndCreate` function to be asynchronous, allowing for proper error handling during product line creation. - Ensured the dialog remains open with user input intact if creation fails, improving user experience. - Adjusted the button click handler to correctly await the validation function before proceeding. This commit improves the reliability and usability of the product line creation process in the payments dialog.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR brings the Payments dashboard surfaces in line with the shared design system: product creation, product-line / included-item dialogs, auth-method toggles, payments empty states, and related layout polish. Dialogs migrate from raw shadcn
DialogtoDesignDialogwith consistent headers, footers, inputs, and selector dropdowns.Base:
dev→ Head:Payments-app-design-fixesScope: 31 files, ~+1.4k / −1.3k lines
Captured on: local dev server (
internalproject), signed in asadmin@example.comScreenshots
Captured from
http://localhost:8101(viewport: 1920×1200 standard, 2560×1440 widescreen). Assets hosted in this gist.Create Product — payments form redesign
Widescreen:
Product Lines onboarding — vertical centering fix
Create Product Line dialog —
DesignDialogmigrationdev— open via Product Line → Create new)Auth Methods — toggle row accessibility
Other migrated surfaces (after only)
Scroll behaviour — Sign-up Rules
What's new
DesignDialogextended withcustomHeader,noBodyPadding, and sectionclassNamehooks; Playground updated to showcase them.CreateProductLineDialog,IncludedItemDialog, price edit, item dialog) migrated to design-system components.DesignButton,DesignInput,DesignSelectorDropdown, and refreshed header actions.<Label htmlFor>instead of click-capture divs.Notes for reviewers
runAsynchronouslyWithAlertwhere applicable).packages/stack/packages/jsare untouched; template + dashboard-ui-components carry SDK-facing dialog changes.Test plan
internalproject (admin@example.com) — light/dark, standard + widescreenpnpm typecheck/pnpm lint/ targeted E2E if API surface changed